<template>
  <div>
    <el-dialog
      title="新增类"
      :visible.sync="addClassVisible"
      width="50%"
      append-to-body
      :before-close="handleClose1"
    >
      <el-form ref="dialogForm" :model="formData" :rules="rules">
        <el-row :gutter="20">
          <el-button
            type="primary"
            style="margin-left: 45%"
            @click="handleAddTion"
            size="mini"
            >添加引入包</el-button
          >
          <div v-for="(list, index) in formData.import_Models" :key="index">
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <el-form-item
                  label="引入包："
                  :prop="`import_Models[${index}]`"
                >
                  <div style="position: relative">
                    <el-input
                      v-model.trim="formData.import_Models[index]"
                      clearable
                      placeholder="请输入引入包"
                    />
                    <i
                      class="el-icon-remove"
                      style="
                        font-size: 20px;
                        color: #409eff;
                        cursor: pointer;
                        position: absolute;
                        top: 24px;
                      "
                      @click="handleTionDelete(index)"
                    ></i>
                  </div>
                </el-form-item>
              </div>
            </el-col>
          </div>
          <el-col :span="12">
            <el-form-item
              prop="moduleId"
              label="选择子项目"
              :rules="[
                {
                  required: true,
                  message: '选择子项目',
                  trigger: 'change',
                },
              ]"
            >
              <el-select
                v-model="formData.moduleId"
                placeholder="选择子项目"
                @change="handleChildChange"
              >
                <el-option
                  v-for="item in moduleLists"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              prop="packageName"
              label="选择模块"
              :rules="[
                {
                  required: true,
                  message: '请选择模块',
                  trigger: 'change',
                },
              ]"
            >
              <el-select
                v-model="formData.packageName"
                placeholder="请选择模块"
              >
                <el-option
                  v-for="item in packageLists"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light" style="margin-right: 5px">
              <el-form-item prop="className" label="名称">
                <el-input
                  v-model.trim="formData.className"
                  placeholder="请输入名称，只能英文且以大写字母开头"
                  clearable
                />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="classDesc" label="对象描述">
              <el-input v-model.trim="formData.classDesc" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="extendsJson" label="继承">
              <el-input v-model.trim="formData.extendsJson" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose1">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  componentCreateClass,
  voClassNameExist,
  listModulePackage,
  projectManageprojectModellist,
} from "@/api/lowcode";
export default {
  components: {},
  props: {
    addClassVisible: {
      type: Boolean,
      default: false,
    },
  },
  inject: ["moduleModetTreeList"],
  data() {
    return {
      rules: {
        className: [
          {
            required: true,
            pattern: /^[A-Z]{1}[A-Za-z]+$/g,
            message: "请输入名称，只能英文且以大写字母开头",
            trigger: "blur",
          },
        ],
        classDesc: [
          { required: true, message: "请输入对象描述", trigger: "blur" },
        ],
      },
      formData: {
        projectId: +sessionStorage.getItem("developLowCodeId"),
        className: undefined,
        import_Models: [""],
        classDesc: "",
        extendsJson: "",
        moduleId: "",
        packageName: "",
      },
      packageLists: [],
      moduleLists: [],
    };
  },
  async created() {
    await this.projectManageprojectModellist();
    this.formData.moduleId = this.moduleLists[0]?.id;
    this.listModulePackage();
  },

  methods: {
    handleChildChange() {
      this.formData.packageName = "";
      this.listModulePackage();
    },
    async projectManageprojectModellist() {
      this.moduleLists = [];
      const res = await projectManageprojectModellist(
        +sessionStorage.getItem("developLowCodeId")
      );
      if (res?.code === 200) {
        this.moduleLists = res.data;
      }
    },
    async listModulePackage() {
      this.packageLists = [];
      const res = await listModulePackage(
        +sessionStorage.getItem("developLowCodeId"),
        this.formData.moduleId
      );
      if (res?.code === 200) {
        this.packageLists = res.data;
      }
    },
    handleAddTion() {
      this.formData.import_Models.push("");
    },
    handleTionDelete(index) {
      if (this.formData.import_Models.length > 1) {
        this.formData.import_Models.splice(index, 1);
      }
    },
    handleClose1() {
      this.$parent.addClassVisible = false;
    },
    async handleBlur(name, id) {
      const res = await voClassNameExist(name, id);
      if (res?.code === 200) {
        if (res.data) {
          this.$message({
            message: "名称已存在，请从新输入",
            type: "warning",
            showClose: true,
          });
          this.formData.className = "";
          return true;
        }
      }
    },
    handleSave() {
      this.$refs["dialogForm"].validate(async (valid) => {
        if (valid) {
          const flag = await this.handleBlur(
            this.formData.className,
            +sessionStorage.getItem("developLowCodeId")
          );
          if (flag) return;
          const form_Data = JSON.parse(JSON.stringify(this.formData));
          form_Data.imports = form_Data.import_Models;
          if (
            form_Data.import_Models.length == 1 &&
            form_Data.import_Models[0] == ""
          ) {
            form_Data.imports = [];
          }
          const res = await componentCreateClass(
            form_Data.packageName,
            form_Data
          );
          if (res?.code === 200) {
            this.$message({
              message: "保存成功",
              type: "success",
            });
            this.$parent.addClassVisible = false;
            this.$parent.currentComponent = "basicsssssComponents";
            await this.moduleModetTreeList();
            this.$parent.fengzhuangConent(res.data);
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
